<template>
	<div class="box_first">
		<div class="login_box">
			<div class="login_title">登录系统</div>
			<el-input class='input_box' size="large" v-model="username" placeholder="请输入用户账号"></el-input>
			<el-input class='input_box' size="large" v-model="password" type="password" placeholder="请输入账号密码"></el-input>
			<!-- <div style="display: flex;justify-content: flex-end;">
				<el-checkbox v-model="remenber">记住我</el-checkbox>
			</div> -->

			<el-button class="btn" type="primary" size="large" @click="login">登录</el-button>

		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useRouter,
		useRoute
	} from 'vue-router';
	import {
		ElMessage
	} from 'element-plus';
	import {
		post
	} from "@/utils/axios.js";

	const username = ref('');
	const password = ref('');
	const remember = ref(true);
	const router = useRouter();

	const login = async () => {
		if (!username.value || !password.value) {
			ElMessage.warning('请输入账号或密码！');
			return;
		}
		localStorage.setItem("token", '12345678910');
		router.push('/account/account2');
		
	};
</script>

<style lang="scss" scoped>
	.box_first {
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		background-image: url('../../assets/img/login_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.login_box {
			width: fit-content;
			background-color: #fff;
			padding: 20px;
			position: fixed;
			bottom: 32vh;
			right: 17vw;
			display: flex;
			flex-direction: column;

			.input_box {
				width: 15vw;
				margin: 1.6vh;
			}

			.btn {
				margin-top: 4vh;
				font-size: 0.2rem;
			}

			.login_title {
				font-size: 0.22rem;
				font-weight: bold;
				text-align: center;
				margin-bottom: 2vh;
			}

		}
	}

	::v-deep .el-checkbox__label {
		color: #c0c0c0;
	}
</style>